<!-- 
 * 示例管理说明
 * @author: 
 * @since: 2022-05-13
 * index.vue
-->
<template>
  <router-view v-show="routerCutLevel === 4" class="detailsPage"></router-view>
  <div class="exampleExplainItem-container listPage" v-show="routerCutLevel == 3">
    <div class="top">
      <div class="search">
        <div class="title">示例说明标题:</div>
        <div class="search-input">
          <el-input v-model="state.exampleExplainTitleData.sampleTitle" disabled />
        </div>
      </div>
    </div>
    <div class="table">
      <TableCom :tableHeader="state.tableHeader" :tableData="state.tableData" :btnData="state.btnData" @getCurrentChange="getCurrentChange" @comEvent="tableEventCom" @colSelect="colSelect" @refresh="getExampleExplainList()" :pagination="state.pagination" :loading="loading" @getSelectChange="getSelectChange" @getSizeChange="getSizeChange" handleWidth="170">
        <functionBtn :btnList="btnList" @clickHandle="clickHandle"></functionBtn>
      </TableCom>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, reactive, computed, watch } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus'
import { successHandle, colFilters, tableIsEnable, batchHandle } from '@/utils/common.js'
import { useRouter } from 'vue-router';
import { getExampleExplainListApi, exampleContentBatchApi } from '@/api/interface/exampleExplain.js'
import { sessionstorage } from "@/utils/storage";
const store = useStore();
const router = useRouter();


const state = reactive({
  exampleExplainTitleData: {},//示例说明标题数据
  tableHeader: [
    {
      label: '示例项名称',
      prop: "sampleName",
    },
    {
      label: '编码',
      prop: "id",
    },
    {
      label: '示例项状态',
      prop: "valid",
      status: true
    },
  ],
  tableData: [],//表格数据
  pagination: {//分页信息
    currentPage: 1,
    size: 10,
    total: 0,
  },
  btnData: [
    {
      name: '编辑',
      icon: 'bianji',
      color: '#25D390',
      change: 'edit'
    },
    {
      name: '删除',
      icon: 'shanchu',
      color: '#F74B33',
      change: 'del'
    },
    {
      name: '是否启用',
      isStart: true,
      prop: 'valid',
      change: 'enable'
    },
  ],
  selectTableId: [],//表格选中的数据
  isBatchStart: true,//是否批量启用禁用
})
//区域加载
const loading = ref(true)

//示例说明管理项功能按钮
const btnList = reactive([
  {
    name: '新增示例项',
    icon: '',
    bgColor: '#25D390'
  },
  {
    name: '批量启用',
    icon: 'qiyong',
    bgColor: '#00A2FF'
  },
  {
    name: '批量禁用',
    icon: 'forbid',
    bgColor: '#FFB018'
  },
  {
    name: '批量删除',
    icon: 'shanchu',
    bgColor: '#F74B33'
  },
])

const routerCutLevel = computed(() => {
  return store.getters['setting/routerCutLevel'];
});


onMounted(() => {
  const level = router.currentRoute.value.meta.level
  store.dispatch('setting/setRouterCut', level);
  const params = router.currentRoute.value.params;
  if (!params.id) {//不是点击table详情进来，点击tabs切换进来
    const data = sessionstorage.get('exampleData')
    state.exampleExplainTitleData = data
  } else {//点击tabe详情进来
    state.exampleExplainTitleData = params
    sessionstorage.set('exampleData', params)
  }
  getExampleExplainList()
})

onUnmounted(() => {
  store.dispatch('setting/setRouterCut', 2);
})

//获取示例内容列表
const getExampleExplainList = () => {
  loading.value = true
  const params = {
    sampleTitleId: state.exampleExplainTitleData.id,
    ipi: state.pagination.currentPage,
    ips: state.pagination.size
  }
  getExampleExplainListApi(params).then(res => {
    const { data, status } = res
    if (status === 200) {
      loading.value = false
      state.tableData = data.result
      state.pagination.currentPage = data.pageNum
      state.pagination.size = data.pageSize
      state.pagination.total = data.total
    }
  })

}

//示例内容批量启用、停用
const exampleContentBatch = (type) => {
  const params = {
    id: state.selectTableId,
    type: type
  }
  exampleContentBatchApi(params).then(res => {
    successHandle(res)
    getExampleExplainList()
  })
}

//表格中的操作
const tableEventCom = (type, data) => {
  switch (type) {
    case 'edit':
      router.push({ name: 'EditExampleItem' }).catch(() => { });
      sessionstorage.set('exampleItem', data)
      break;
    case 'del':
      tableIsEnable(state.tableData, 'del', data, (newArr) => {
        state.selectTableId = newArr
        exampleContentBatch('del')
      })
      break;
    case 'enable':
      tableIsEnable(state.tableData, 'valid', data, (newArr) => {
        state.selectTableId = newArr
        !(data.valid) ? exampleContentBatch('start') : exampleContentBatch('stop')
      })
      break;



  }

}

//点击示例管理项操作按钮
const clickHandle = (index) => {
  switch (index) {
    case 0://新增字典项
      router.push({ name: 'AddExampleItem' }).catch(() => { });
      break;
    case 1://批量启用
      batchHandle(state.selectTableId, 'START', () => {
        exampleContentBatch('start')
      })
      break;
    case 2://批量禁用
      batchHandle(state.selectTableId, 'STOP', () => {
        exampleContentBatch('stop')
      })
      break;
    case 3://批量删除
      batchHandle(state.selectTableId, 'DEL', () => {
        exampleContentBatch('del')
      })
      break;

  }
}

//表格筛选列---取消全选
const colSelect = (data, type, e, currentItem) => {
  if (type === 'filter') {
    const currentData = colFilters(data, e, currentItem, state.tableHeader)
    state.tableHeader = currentData;
  } else {//全选/全取消
    state.tableHeader = data;
  }
}

//点击条数
const getSizeChange = (val) => {
  state.pagination.size = val;
  getExampleExplainList()
}

//点击当前页
const getCurrentChange = (val) => {
  state.pagination.currentPage = val;
  getExampleExplainList()
}

//选择表格数据
const getSelectChange = (row) => {
  state.selectTableId = row.map(item => item.id)
}


</script>

<style lang="scss" scoped>
.exampleExplainItem-container {
  .top {
    padding: 20px 20px 0 20px;
    .search {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 20px;
      .title {
        margin-right: 5px;
        color: #666666;
        font-size: 12px;
      }
      .search-input {
        width: 160px;
      }
    }
  }
}
</style>
